<template>
  <div>
    <el-dialog :title="dataSourceDialog.title" :visible.sync="dataSourceDialog.show" width="30%" destroy-on-close @close='closeDialog' @open='openDialog'
               :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false">
      <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入名称" style="width:90%;" />
        </el-form-item>
        <el-form-item label="类型" prop="dsType">
            <el-select v-model="formData.dsType" placeholder="请选择类型" class="filter-item">
              <el-option v-for="item in dsTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" placeholder="请输入用户名" style="width:90%;" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" placeholder="请输入密码" style="width:90%;" />
        </el-form-item>
        <el-form-item label="配置方式" prop="confType">
          <el-radio-group v-model="confType" size="mini">
            <el-radio label="0" border>主机</el-radio>
            <el-radio label="1" border>JDBC</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="主机" prop="host">
          <el-input v-model="formData.host" placeholder="请输入主机" style="width:90%;" />
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input type="number" v-model="formData.port" placeholder="请输入端口" style="width:90%;" />
        </el-form-item>
        <el-form-item label="数据库" prop="dsName">
          <el-input v-model="formData.dsName" placeholder="请输入数据库名称" style="width:90%;" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataSourceDialog.show = false">取 消</el-button>
        <el-button type="primary" v-if="dataSourceDialog.option == 'add'" @click="addDataSource('form')">确 定</el-button>
        <el-button type="primary" v-if="dataSourceDialog.option == 'edit'" @click="editDataSource('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['dataSourceDialog', 'formData'],
  data() {
    return {
      confType: '1',
      dsTypeOptions: [
        {
          value: "mysql",
          label: "mysql",
        },
        {
          value: "Oracle",
          label: "Oracle",
        },
      ],
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
          ],
        dsType: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        confType: [{ required: true, message: '请选择配置方式', trigger: 'blur' }],
        host: [{ required: true, message: '请输入主机', trigger: 'blur' }],
        port: [{ required: true, message: '请输入端口', trigger: 'blur' }],
        dsName: [{ required: true, message: '请输入数据库名称', trigger: 'blur' }],
      },
    }
  },
  methods: {
    openDialog() {
      this.confType = '1';
    },
    closeDialog() {

    },
    addDataSource(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("addDataSource")
        } else {
          console.log('提交失败!!');
          return false;
        }
      });

    },
    editDataSource(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("editDataSource")
        } else {
          console.log('提交失败!!');
          return false;
        }
      });
    }
  },
}
</script>

<style lang="sass" scoped>
</style>
